<template>
    <div class="notice_list">
        <Header v-if="showHeader" title="消息列表"></Header>
        <!-- <van-nav-bar title="消息列表" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar> -->
        <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
        <mescroll-vue ref="noticeListMescroll" :up="mescrollUp" @init="mescrollInit">
            <ul id="noticeList" :style="{minHeight:clientH}">
                <li class="notice_item_info" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
                    <h3>{{item.title}} <span>{{item.add_time}}</span></h3>
                    <p>{{item.message}}</p>
                </li>
            </ul>
        </mescroll-vue>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import Loading from "@/components/Loading.vue";
import { noticeList } from "@/request/api.js";
import Header from "@/components/Header.vue";
export default {
    name:'NoticeList',
    data(){
        return{
            clientH:0,
            showHeader:this.$store.state.showHeader,
            showLoading:true,
            type_id:'',
            list: [],
            mescroll: null,
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    limit: 10 // 每页数据的数量
                },
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                    warpId: 'noticeList', // 父布局的id;
                    tip: '没有更多了~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
        }
    },
    components:{MescrollVue,Loading,Header},
    created(){
        var h = document.body.clientHeight
        if (this.showHeader) {
            this.clientH = h - 44 + 'px';
        } else {
            this.clientH = h + 'px';
        }
        
        console.log(this.$route)
        
        if(this.$route.query.type_id){
            this.type_id = this.$route.query.type_id
        }
        if (this.$route.query.token) {
            let token = this.$route.query.token;
            this.$store.commit('setToken',token);
            localStorage.setItem('token',token);
        }  else {
            // console.log(this.$router)
            // this.$router.replace({ path: '/login' });
        }
    },
    mounted(){
        // this.showLoading = false;
    },
    methods:{
        //前往详情
        goDetail(item){
            // console.log(item);
            let Url = item.url;
            console.log(Url.split('#')[1])
            this.$router.push({path:Url.split('#')[1]})
            // this.$router.push(Url.split('#')[1])
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // console.log('pages'+page.num)
            // 联网加载数据
            noticeList({
                token:this.$store.state.token,
                page:page.num,
                per_page:page.limit,
                type_id:this.type_id
            }).then(res=>{
                this.showLoading = false;
                let list = res.data;
                // console.log(list)
                if (page.num==1) {
                    this.list = list.messages;
                } else {
                    this.list = this.list.concat(list.messages);
                }
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    mescroll.endSuccess(list.messages.length)
                })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        }, 
        onClickLeft(){
            // 后退一步记录，等同于 history.back()
            this.$router.go(-1)
        },
    }
}
</script>
<style lang="less" scoped>
.notice_list{
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    .notice_item_info{
        font-size: 12px;
        font-family: 'PingFang-SC-Medium';
        color: #666;
        padding: 15px 0;
        box-sizing: border-box;
        overflow: hidden;
        border-bottom: 1px solid #f7f7f7;
        h3{
            font-size: 14px;
            color: #151617;
            font-family: 'PingFang-SC-Bold';
            line-height: 22px;
            span{
                font-size: 12px;
                color: #999;
                font-family: 'PingFang-SC-Medium';
                float: right;
                font-weight: normal;
            }
        }
        p{line-height: 18px;}
    }
}
.van-nav-bar{
    height: 44px;
    line-height: 44px;
    font-family: 'PingFang-SC-Bold';
    .van-nav-bar__title{
        color: #151617;
        font-size: 17px;
    }
}
/deep/ .van-nav-bar .van-icon{color: #626466;font-size: 17px;}
.mescroll {
    position: fixed;
    padding: 0 15px;
    box-sizing: border-box;
    background: #fff;
    top: 0;
    bottom: 0;
    height: auto;
}
.mescroll /deep/ .mescroll-empty{
    padding-top: 0;
    position: absolute;
    left: 0;
    bottom: 0.533rem;
}
</style>